<template>
	<view class="waterfall-item-container">
		<view class="waterfall-item " @click="onTap">
            <view class="relative">
                <image lazy-load :src="item.src" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
                <view class="note-auth bgw" v-if="params.auth=='normal'">
                    <span class="mr05 bz">#</span>{{item.auth}}
                </view>
            </view>

            <view class="wd100 two-info">
                <view class="u-line-2 title">{{item.name}}</view>
                <view class="wd100 wlkflex col9 read-like mt20 justify-between" v-if="params.read=='normal' || params.like=='normal'">
                    <view v-if="params.read=='normal'">阅读 {{item.read}}</view>
                    <view v-if="params.like=='normal'" class="wlkflex">
                        <u-icon name="heart" color="#999999" size="15"></u-icon>
                        <view class="ml05">{{item.like}}</view>
                    </view>
                </view>
            </view>

		</view>
	</view>
</template>

<script>
	export default {
		name:"helangWaterfallItem",
		options:{
			virtualHost: true
		},
		props:{
			item:{
				type: Object,
				default(){
					return {}
				}
			},
            params:{
                type: Object,
                default(){
                    return {}
                }
            },
			tag:{
				type:String | Number,
				default:''
			},
			index:{
				type:Number,
				default:-1
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
			emitHeight(e){
				const query = uni.createSelectorQuery().in(this);
				query.select('.waterfall-item-container').boundingClientRect(data => {
					let height = Math.floor(data.height);
					this.$emit("height",height,this.$props.tag);
				}).exec();
			},
			onTap(){
				this.$emit("click",this.$props.index,this.$props.tag);
			}
		}
	}
</script>

<style lang="scss" scoped>
    .waterfall-item {
        /*padding: 16rpx;*/
        background-color: #fff;
        border-radius: 4px;
        color: #666;
        .line-start{
            position: absolute;
            left: 0;
            top: 0;
            font-size: $font-sm;
            background-color: rgba(0,0,0,0.18);
            border-radius:4px 0 4px 0;
            padding: 6rpx 10rpx;
            color: #FFFFFF;
        }
        image{
            display: block;
            width: 100%;
            // 默认设置一个图片的大约值
            height: 350rpx;
        }
        .two-info{
            padding: 20rpx 20rpx 20rpx 20rpx;
            pointer-events: none;
            .title{
                font-weight: bold;
                font-size: $font-base;
                color: $-color-normal;
            }
            .read-like {
                font-size: $font-sm;
            }
        }
        .note-auth{
            position: absolute;
            left: 20rpx;
            bottom: 20rpx;
            font-size: $font-sm;
            line-height: 36rpx;
            background-color: white;
            border-radius:2px;
            padding: 0 10rpx;
            color: $-color-normal;
            .bz{
                color: #d40;
            }
        }
    }
</style>
